<!--
 * @Author: panda
 * @Date: 2022-05-18 09:46
 * @Description: 用户主页 TODO
-->
<template>
  <div class="common-layout">
    <el-row>
      <el-col :span="6" />
      <el-col :span="12">
        <el-container>
          <el-header style="height: 200px; padding: 30px; position: relative">
            <el-space :size="30" alignment="end">
              <el-avatar :size="150" shape="square" :src="userInfo.avatar" />
              <el-space direction="vertical" alignment="left">
                <div style="font-size: 25px">
                  <span>{{ userInfo.username }}</span
                  ><br />
                  个人简介: <span>{{ userInfo.detail }}</span>
                </div>
                <div>
                  性别：
                  <el-icon>
                    <component :is="userInfo.sex === '1' ? male : female" />
                  </el-icon>
                </div>
              </el-space>
            </el-space>
            <el-button
              @click="toModify(userInfo.id)"
              style="position: absolute; bottom: 30px; right: 30px"
              >编辑个人资料
            </el-button>
          </el-header>
          <el-main>
            <el-tabs
              v-model="activeName"
              type="card"
              class="demo-tabs"
              @tab-click="handleClick"
            >
              <el-tab-pane label="视频" name="first" :lazy="true">
                <VideoList :userid="userInfo.id" />
              </el-tab-pane>
              <el-tab-pane label="文章" name="second" :lazy="false">
                <ArticleContainer :userid="userInfo.id" />
              </el-tab-pane>
            </el-tabs>
          </el-main>
        </el-container>
      </el-col>
      <el-col :span="6" />
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import VideoList from "@/components/video/VideoList.vue";
import { Female, Male } from "@element-plus/icons-vue";

import { onMounted, reactive, ref, shallowRef } from "vue";
import type { TabsPaneContext } from "element-plus";
import ArticleContainer from "@/components/article/ArticleContainer.vue";
import { userApi } from "@/api/user";
import { router } from "@/router";
import { useRoute } from "vue-router";

const activeName = ref("first");
const userInfo = reactive({
  id: "",
  username: "",
  avatar: "",
  detail: "",
  homePath: "",
  sex: "",
});
const male = shallowRef(Male);
const female = shallowRef(Female);
const route = useRoute();
onMounted(() => {
  userApi
    .getUserInfo({ id: route.params.id })
    .then((res) => {
      const { data } = res.data;
      userInfo.id = data.id;
      userInfo.sex = data.sex;
      userInfo.avatar = data.avatar;
      userInfo.username = data.username;
      userInfo.detail = data.detail;
    })
    .catch();
});

const toModify = (id: string) => {
  const routeData = router.resolve({
    path: "/modify/" + id,
  });
  window.open(routeData.href);
};

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
</script>

<style scoped>
</style>
